<template>
  <div :class="$style.whitemodal">
    <div :class="$style.topBlock">
      <div :class="$style.tabBox">
        <div :class="[$style.tabItem, tabIndex == 0 ? $style.tabActive : '']" @click="changeTab(0)">出金</div>
        <div :class="[$style.tabItem, tabIndex == 1 ? $style.tabActive : '']" @click="changeTab(1)">入金</div>
      </div>
    </div>
    <div :class="$style.mainBlock">
      <lay-table :page="pageInfo" height="100%" :columns="columnList" :data-source="dataList" @change="changePage">

      </lay-table>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "WhiteModal",
  data() {
    return {
      tabIndex: 0,
      pageInfo:{ current: 1, limit: 10, total: 100 },
      dataList:[
        // {name1:'sas001',name2:'222',name3:'333'},
        // {name1:'sas001',name2:'222',name3:'333'},
      ],
      columnList:[        
        { title:'金额', width: '', key:'name1' },
        { title:'状态', width: '', key:'name2' },
        { title:'日期', width: '', key:'name3' },
      ]
    };
  },
  methods: {   
    changePage(page){
      console.log(page)
    }, 
    changeTab(index) {
      this.tabIndex = index;
    },
  },
});
</script>
<style module>
.whitemodal {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  overflow-y: auto;
}
.topBlock {
  width: 100%;
  height: 85px;
  box-sizing: border-box;
  padding-top: 25px;
}

.tabBox {
  width: 100%;
  height: 40px;
  background: #F0F2F5;
  border-radius: 3px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 5px;
}

.tabItem {
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 30px;
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #515A6E;
  cursor: pointer;
}

.tabActive {
  background-color: #FFFFFF;
  border-radius: 3px;
  color: #1890FF;
}

.mainBlock {
  width: 100%;
  height: calc(100% - 85px);
  box-sizing: border-box;
  padding-bottom: 20px;
}
</style>